// composables/useCrudTable.js
import { ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'

export function useCrudTable(initialRows = []) {
  // 数据源
  const rows = ref(initialRows)

  // 多选数据
  const multipleSelectionIds = ref([])

  // 编辑
  function openEdit(row) {
    console.log('编辑用户', row)
    ElMessage.info(`编辑用户：${row.name}`)
  }

  // 删除
  function remove(id) {
    ElMessageBox.confirm('确定要删除该用户吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      rows.value = rows.value.filter(r => r.id !== id)
      ElMessage.success('删除成功')
    }).catch(() => {
      // 取消
    })
  }

  // 批量删除
  function batchDelete() {

  }

  // 监听多选
  function handleSelectionChange(val) {
  multipleSelectionIds.value = val.map(item => item.id)
  console.log('选中的ID:', multipleSelectionIds.value)
    
  }

  // 排序
  function handleSortChange({ prop, order }) {
    console.log('排序字段：', prop, '排序方式：', order)
    // 可选：本地排序逻辑
    if (order) {
      rows.value.sort((a, b) => {
        const av = a[prop]
        const bv = b[prop]
        if (av === bv) return 0
        return order === 'ascending' ? (av > bv ? 1 : -1) : (av < bv ? 1 : -1)
      })
    }
  }

  return {
    rows,
    multipleSelectionIds,
    openEdit,
    remove,
    batchDelete,
    handleSelectionChange,
    handleSortChange,
  }
}
